<template>
  <article class="gift">
    <app-head title="我的礼包"></app-head>

    <scroll :data="userGiftList" action="getUserGiftList">
      <ul slot="scrollInner" class="gift-inner">
        <li class="gift-item" v-for="(item, index) in userGiftList.list" :key="index">
          <img class="icon" :src="item.game_icon || item.icon" alt="">
          <div class="message">
            <h1 class="title">{{item.gift_name}}</h1>
            <p class="code">兑换码：{{item.gift_code}}</p>
            <p class="time">期限：{{dateFormat(item.end_time)}}</p>
          </div>
          <button class="button" data-clipboard-action="copy" :data-clipboard-text="item.gift_code">复制</button>
        </li>
      </ul>
    </scroll>
  </article>
</template>

<script>
  import {mapGetters} from 'vuex'
  import Clipboard from 'clipboard'
  import Scroll from '@/components/common/Scroll'

  export default {
    name: 'gift',
    components: {
      Scroll
    },
    data() {
      return {}
    },
    computed: {
      ...mapGetters([
        'userGiftList'
      ])
    },
    methods: {},
    created() {
      this.$store.dispatch('getUserGiftList')

      let clipboard = new Clipboard('.button')
      clipboard.on('success', e => {
        this.$tips('复制成功！')
      })
      clipboard.on('error', e => {
      })
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .gift {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    overflow-y: scroll;
    background: rgba(248, 248, 248, 1);

    &-inner {
      padding: 0 0.15rem;
      background-color: #ffffff;
    }

    &-item {
      height: 0.84rem;
      border-bottom: 0.01rem solid #D8D8D8;
      width: 100%;
      font-size: 0.12rem;
      display: flex;
      align-items: center;

      &:last-child {
        border: none;
      }

      .icon {
        margin-right: 0.16rem;
        width: 0.57rem;
        height: 0.57rem;
        border-radius: 0.12rem;
      }

      .message {
        flex: 1;
        overflow: hidden;
      }

      .title {
        font-weight: 600;
        line-height: 0.21rem;
        font-size: 0.15rem;
      }

      .code {
        margin-top: 0.03rem;
        margin-bottom: 0.02rem;
        color: #249AFF;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .time {
        font-size: 0.1rem;
        color: #999999;
      }

      .button {
        margin-left: auto;
        padding: 0 0.13rem;
        line-height: 0.26rem;
        color: #ffffff;
        background: rgba(255, 140, 45, 1);
        border-radius: 50px;
      }
    }
  }
</style>
